<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../favicon.ico" rel="shortcut icon" />
<link href="../../base.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../jquery/jquery.js" type="text/javascript"></script>
<script src="../../event.drag/jquery.event.drag.js" type="text/javascript"></script>
<script src="../../event.drop/jquery.event.drop.js" type="text/javascript"></script>
<title>jquery.event.drop</title>
</head><body>

<a href="./">&laquo; Index</a>

<style type="text/css" media="screen">
.boxdrag {
	position: absolute;
	padding: 15px;
	background: #CCF;
	border: 1px solid #AAD;
	cursor: move;
	}
#droplist {
	list-style: none;
	padding: 0;
	margin: 75px 0 0 0;
	}
#droplist li {
	list-style: none;
	padding: 20px;
	margin: 5px;
	background: #EEE;
	border: 1px solid #CCC;
	float: left;
	}
#droplist li.dropped {
	background: #AAA;
	color: #EEE;
	}	
#droplist li.active {
	background: #FFC;
	}		
</style>

<script type="text/javascript">
jQuery(function($){
					
	$('#dragdemo')
		.bind("drag",function( ev, dd ){
			$( this ).css({
				top: dd.offsetY,
				left: dd.offsetX
				});
			})
		.bind("dragend",function( ev, dd ){
			$( this ).animate({
				top: dd.originalY,
				left: dd.originalX
				});
			});
	
	$('#droplist li')
		.bind("dropstart",function(){
			$( this ).addClass('active');
			})
		.bind("drop",function(){
			$( this ).toggleClass('dropped');
			})
		.bind("dropend",function(){
			$( this ).removeClass('active');
			});
	
	$.dropManage({ mode:"overlap", multi:false });	
	
	});
</script>

<h2>event.drop / overlap</h2>

<div class="boxdrag" id="dragdemo">Drag</div>

<ol id="droplist">
	<li>Alpha</li>
	<li>Bravo</li>
	<li>Charlie</li>
	<li>Delta</li>
	<li>Echo</li>
	<li>Foxtrot</li>
	<li>Golf</li>
	<li>Hotel</li>
	<li>India</li>
	<li>Juliet</li>
	<li>Kilo</li>
	<li>Lima</li>
	<li>Mike</li>
	<li>November</li>
	<li>Oscar</li>
	<li>Papa</li>
	<li>Quebec</li>
	<li>Romeo</li>
	<li>Sierra</li>
	<li>Tango</li>
	<li>Uniform</li>
	<li>Victor</li>
	<li>Whiskey</li>
	<li>X-ray</li>
	<li>Yankee</li>
	<li>Zulu</li>
	</ol>

</body></html>